<!-- shown when the team does not include a proposal in this column -->
<div class="no-data" ng-if="candidates.length == 0">
  <span
    ng-i18next="avBooth.notSelectableCell">
  </span>
</div>

<!-- shown when the team includes a candidate in this column -->
<div
  class="has-data"
  ng-if="candidates.length == 1"
  ng-class="{selected: candidates.selected > 0}"
  ng-click="toggleCell(team, question_index)">
  <img
    class="cand-img"
    ng-if="getUrl(candidates[0], 'Image URL')"
    ng-src="{{getUrl(candidates[0], 'Image URL').url}}"
    alt="{{candidates[0].text}}" />
  <span class="label label-default label-category">{{question_title}}</span>
  <span class="one-line">{{candidates[0].text}}</span>
</div>

<!-- shown when the team includes multiple candidates in this column -->
<div
  class="has-data"
  ng-if="candidates.length > 1"
  ng-class="{selected: candidates.selected > 0}">
  <span class="label label-default label-category">{{question_title}}</span>
  <div
    class="has-data-wrapper"
    ng-click="toggleCell(team, question_index)">
    <span
      class="first-candidate"
      ng-i18next="[i18next]({name: candidates[0].text})avBooth.firstCandidateOfMany">
    </span>
    <span class="num-selected"
      ng-i18next="[i18next]({selected: candidates.selected, total: candidates.length})avBooth.numCandidatesSelected">
    </span>
  </div>
  <button
    class="btn btn-default btn-right"
    ng-class="{'in': isOpenCell()}"
    ng-click="toggleOpenCell()">
    <span ng-i18next="avBooth.dropdownOptionView">
    </span>
    <span
      class="glyphicon"
      ng-class="{'glyphicon-chevron-up': isOpenCell(), 'glyphicon-chevron-down': !isOpenCell()}">
    </span>
  </button>
  <div
    class="candidates-list"
    ng-if="isOpenCell()">
    <span class="label label-default label-category">{{question_title}}</span>
    <h4
      ng-i18next="avBooth.candidatesTitle"
      ng-click="toggleCell(team, question_index)">
    </h4>
    <div
      class="candidate"
      ng-repeat="cand in candidates"
      ng-class="{'selected': cand.selected > -1}"
      ng-click="toggleCandidate(team, cand)">
      <span
        class="glyphicon"
        ng-class="{'glyphicon glyphicon-check': cand.selected > -1, 'glyphicon glyphicon-unchecked': cand.selected === -1}">
      </span>
      <span>
        <img
          class="item-cand-img"
          ng-if="getUrl(cand, 'Image URL')"
          ng-src="{{getUrl(cand, 'Image URL').url}}"
          alt="{{cand.text}}" />
      </span>
      <span>{{cand.text}}</span>
    </div>
  </div>
</div>